<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .contration{
            display: flex;

        }
        .contration .left{
             display: flex;
              flex-direction: column;
            height: 120px;
            width: 40px;
        }
        .contration .left .top{
            display: flex;
            flex-wrap: wrap;
        }
        .contration .left .top div{
            width:20px;
            height: 20px;
        }
        .blue{
            background-color: blue;
        }
        .red{
            background-color: red;
        }
        .contration .left .button div{
              height: 80px;
            width: 40px;
              background-color: #0c85d0;
          }
        .contration .right {
            width: 80px;
            height: 120px;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
        }
        .contration .right .child div{
            height: 20px;
            width: 20px;

        }
        .contration .right div{
            width: 40px;
            height: 40px;
        }
        .child{
            display: flex;
            flex-wrap: wrap;
        }
        .child div:nth-child(1),.child div:nth-child(4){
             background-color: #0b90a8;
        }
        .child div:nth-child(2),.child div:nth-child(3){
            background-color: #0b2e13;
        }

        .contration .right>div:nth-child(1){
            background-color: pink;
        }
        .contration .right>div:nth-child(2), .contration .right>div:nth-child(3){
            background-color: rebeccapurple;
        }
        .contration .right>div:nth-child(5),.contration .right>div:nth-child(6){
            background-color: sienna;
        }
    </style>
</head>
<body>
<div class="contration">
    <div class="left">
        <div class="top">
        <div class="blue">
        </div>
        <div class="red">
        </div>
            <div class="red">
            </div>
            <div class="blue">
            </div>
        </div>
        <div class="button">
            <div></div>
        </div>
    </div>
    <div class="right">
        <div></div>
        <div></div>
        <div></div>
        <div class="child">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div></div>
        <div></div>
</div>
</div>
</body>
<script>
     var i={
         'type':123,
          'test1':function () {
             var This = this;
             setInterval(function () {
                      This.test2();
             },1000)
          },
         'test2':function (This) {
             console.log(this)
         }
     }
     i.test1();
</script>
</html>